<template>
  <div class="region-task">
    <CommTitle title="区域执行任务" />
    <div class="region-task-info right-card-two">
      <div class="region-task-info-item" v-for="[key,value] in Object.entries(executionTaskInformation[0]|| {})" :key="key">
        <span>{{key}}：</span>
        <span>{{ value }}</span>
      </div>
      <!-- <div class="region-task-info-item">
        <span>动作指令：</span>
        <ul>
          <li>1.AGV发送撤离请求，区域8-8 PLC校验型架落位状态(压力传感器+视觉定位)</li>
          <li>2.若型架未固定，区域8-8 PLC拒绝请求触发型架自检</li>
          <li>3.AGV撤离，实时避障（静态地图，动态障碍物检测）</li>
          <li>4.AGV返回AGV存放区域后，上报任务日志至WMS系统，AGV状态切花为空闲，子任务结束</li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs } from 'vue'
import CommTitle from './CommTitle.vue'
import { getInfoFuzzy } from '@/api/CollectRequest.js'
import XJPostionData from '@/views/data/XJPostionData.js'
import { useStore } from 'vuex'
const store = useStore()
const { currentRegionName } = toRefs(store.state)

const executionTaskInformation = ref([])
onMounted(async () => {
  const result = XJPostionData
    .filter(item => item.region === currentRegionName.value)
    .map(item => item.stationName)
  // console.log('result', result)

  const { data: res } = await getInfoFuzzy({ modelId: 'fixtureInfo' })
  // console.log('resres', res.data)

  executionTaskInformation.value = res.data.filter(item => {
    const deviceState = JSON.parse(item.collectValue)['型架当前位置']
    return result.some(name => deviceState.includes(name))
  })
    .map(item => JSON.parse(item.collectValue))

  if (executionTaskInformation.value.length) {
    const obj = executionTaskInformation.value[0]
    Object.keys(obj).forEach(key => {
      if (!['卡板工装编号', '卡板数量', '部段构型', '部段类型', '架次号', '壁板类型'].includes(key)) {
        delete obj[key]
      } else {
        if (obj[key] === '' || obj[key] === null) return
        if (key === '部段构型') {
          obj[key] = (obj[key] - 0) === 0 ? '缺省' : (obj[key] - 0) === 1 ? '高原型' : '平原型'
        } else if (key === '部段类型') {
          obj[key] = (obj[key] - 0) === 0 ? '缺省' : (obj[key] - 0) === 1 ? '前机身' : '中后机身'
        }
      }
    })
  }
})
</script>

<style lang="less" >
.region-task{
  height: 100%;
  .region-task-info {
    // height: 460px;
    height: calc(100% - 70px);
    // background-color: red;
    margin: 0 10px 10px 15px;
    padding-right: 5px;
    box-sizing: border-box;
    font-family: Source Han Sans CN;
    font-size: 12px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(75, 137, 255, 0.2);
    }

    .region-task-info-item {
      display: flex;
      align-items: center;
      padding-left: 15px;
      min-height: 36px;
      background: url('@/assets/homePage/row.png') no-repeat;
      background-size: 100% 100%;
      margin: 5px 0;
      > span {
        display: inline-block;
        &:nth-of-type(1) {
          min-width: 32%;
          font-size: 14px;
        }
      }
      ul {
        width: calc(100% - 22%);
        li {
          list-style: none;
          height: 40px;
          margin-left: 0;
          margin-right: 0;
          margin-top: 5px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
